<template>
	<view class="rticleaList">
		<nav-tab :tabTitle="tabTitle" @changeTab='changeTab'></nav-tab>
		<view class="tui-news-view">
			<block v-for="(rticleaListItem,rticleaListIndex) in rticleaListData[currentTab]" :key="rticleaListIndex">
				<list-cell :index="rticleaListIndex" @click="rticleaItemClick(rticleaListItem.rticleaId)">
					<view class="tui-news-flex" :class="[rticleaListItem.rticleaImgList.length>1 ?  'tui-flex-column':'tui-flex-start']">
						<view class="tui-news-picbox" :class="[rticleaListItem.rticleaImgList.length>1?'tui-w-full':'tui-w220 tui-h165',rticleaListItem.rticleaImgList.length>1?'padding-flex':'']"
						 v-if="rticleaListItem.rticleaImgList.length>0">
							<block v-for="(imgItem,imgItemIndex) in rticleaListItem.rticleaImgList" :key="imgItemIndex">
								<image :src="imgItem" mode="aspectFill" class="tui-block" :class="[rticleaListItem.rticleaImgList.length>1?'tui-one-third':'tui-onone-third']"
								 v-if="imgItemIndex<3"></image>
							</block>
							<view class="tui-btm-badge" v-if="rticleaListItem.rticleaImgList.length>3">{{rticleaListItem.rticleaImgList.length+'图'}}</view>
						</view>
						<view class="tui-news-tbox tui-flex-column tui-flex-between" :class="[rticleaListItem.rticleaImgList.length===1?'tui-h165 tui-pl-20':'']">
							<view class="tui-news-title" :class="[(rticleaListItem.rticleaImgList.length===1)|| rticleaListItem.rticleaImgList.length===0?'':'tui-pt20']">{{rticleaListItem.rticleaTitle}}</view>
							<view class="tui-sub-box" :class="[rticleaListItem.rticleaImgList.length===1?'':'tui-pt20']">
								<view class="tui-sub-source">{{rticleaListItem.rticleaName}}</view>
								<view class="tui-sub-cmt">
									<view>{{rticleaListItem.rticleaRead}}人阅读</view>
								</view>
							</view>
						</view>
					</view>
				</list-cell>
			</block>
		</view>
		<loadmore :visible="loadding[currentTab]" :index="3" type="red"></loadmore>
		<nomore :visible="pullUpOn[currentTab]" bgcolor="#FFF"></nomore>
	</view>
</template>

<script>
	import navTab from '../../components/navTab.vue'
	export default {
		components: {
			navTab,
		},
		data() {
			return {
				tabTitle: [],
				currentTab: 0,
				pullUpOn: [],
				loadding: [],
				pages: [],
				limit: 6,
				rticleaListData: [
					[],
					[]
				]
			};
		},
		created: async function() {
			let tabTitle = await this.getRticleatypeList()
			this.tabTitle = tabTitle.map(item => item.rticleatypeTitle)
			this.initpara()
			this.getRticleabyType()
			uni.$on('updataRticleaRead', (rticleaId, rticleaRead) => {
				this.rticleaListData.forEach(rticleaListItem => rticleaListItem.filter(item => item.rticleaId == rticleaId).map(
					item => {
						item.rticleaRead = rticleaRead
					}))
			})
		},
		methods: {
			changeTab(index) {
				// console.log(this.rticleaListData[this.currentTab].length,this.pullUpOn[this.currentTab],this.currentTab,this.rticleaListData)
				if (this.rticleaListData[this.currentTab].length || this.pullUpOn[this.currentTab]) {
					return;
				}
				this.getRticleabyType()
			},
			initpara() {
				let leg = this.tabTitle.length
				this.pages = Array(leg).fill(1)
				this.pullUpOn = Array(leg).fill(false)
				this.loadding = Array(leg).fill(false)
				for (var i = 0; i < leg; i++) {
					this.rticleaListData.push(Array.of())
				}
			},
			getRticleatypeList() {
				return this.$api.getRticleatypeList().then(res => {
					if (res.code) {
						return res.data
					}
				})
			},
			getRticleabyType() {
				if (this.pullUpOn[this.currentTab]) return;
				this.$set(this.loadding, this.currentTab, true)
				this.$api.getRticleabyType({
					page: this.pages[this.currentTab],
					limit: this.limit,
					rticleaTitle: this.tabTitle[this.currentTab]
				}).then(res => {
					if (res.code) {
						this.pages[this.currentTab]++
						this.rticleaListData[this.currentTab].push(...res.data);
						if (!res.data.length || res.data.length < this.limit) {
							this.$set(this.pullUpOn, this.currentTab, true)
						}
						this.$set(this.loadding, this.currentTab, false)
					} else {
						this.$set(this.loadding, this.currentTab, false)
						this.$set(this.pullUpOn, this.currentTab, true)
					}
				})
			},
			rticleaItemClick(rticleaId) {
				this.$common.navigateTo('/pages/rticleaInfo/rticleaInfo?rticleaId=' + rticleaId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rticleaList {
		background-color: #FFFFFF;
		margin-top: 20upx;
	}

	.tui-news-flex {
		width: 100%;
		display: flex;
		// padding: 12upx;
	}

	.tui-flex-start {
		align-items: flex-start !important;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-flex-column {
		flex-direction: column !important;
	}

	.tui-flex-between {
		justify-content: space-between !important;
	}

	.tui-news-cell {
		display: flex;
		padding: 20rpx 30rpx;
	}

	.tui-news-tbox {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		display: flex;
	}

	.tui-news-picbox {
		display: flex;
		position: relative;
		overflow: hidden;
	}

	.tui-w220 {
		width: 220rpx;
	}

	.tui-h165 {
		height: 165rpx;
	}

	.tui-block {
		display: block;
	}

	.tui-w-full {
		width: 100%;
	}

	.tui-one-third {
		width: 33%;
		height: 215upx;
	}

	.tui-onone-third {
		width: 100%;
		height: auto;
	}

	.tui-news-title {
		width: 100%;
		font-size: 30rpx;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		box-sizing: border-box;
	}

	.tui-pl-20 {
		padding-left: 20rpx;
	}

	.tui-pt20 {
		padding-top: 20rpx;
	}

	.tui-sub-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;
		box-sizing: border-box;
		line-height: 24rpx;
	}

	.tui-sub-source {
		font-size: 20rpx;
	}

	.tui-sub-cmt {
		font-size: 20rpx;
		line-height: 20rpx;
		display: flex;
		align-items: center;
	}

	.tui-tag {
		padding: 2rpx 6rpx !important;
		margin-left: 10rpx;
	}

	.tui-scale {
		transform: scale(0.6);
		transform-origin: center center;
	}

	.tui-btm-badge {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 12rpx;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20;
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-video {
		position: absolute;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		transform-origin: 0 0;
	}

	.padding-flex {
		image {
			padding: 0upx 5upx;
		}
	}

	.tui-icon {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 26rpx;
	}

	.tui-icon-box .tui-icon {
		background: none;
		padding: 0;
		border-radius: 0;
	}
</style>
